<template>
  <view class="container">
    <!-- 顶部图片 -->
    <view class="top-image">
      <image src="/static/logo.png"  ></image>
    </view>

    <!-- 注册表单 -->
    <view class="form-container">
      <view class="input-item">
        <input 
          type="number" 
          placeholder="请输入手机号" 
          v-model="phone"
          placeholder-class="input-placeholder"
        />
      </view>
      <view class="input-item">
        <input 
          password 
          placeholder="请输入密码" 
          v-model="password"
          placeholder-class="input-placeholder"
        />
      </view>
      <view class="input-item">
        <input 
          password 
          placeholder="请再次输入密码" 
          v-model="confirmPassword"
          placeholder-class="input-placeholder"
        />
      </view>
      
      <button class="register-btn" @click="handleRegister">注册</button>
      <view class="login-text" @click="goToLogin">若已有账号，直接登录</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phone: '',
      password: '',
      confirmPassword: ''
    }
  },
  methods: {
    handleRegister() {
      // 表单验证
      if (!this.phone) {
        uni.showToast({ title: '请输入手机号', icon: 'none' })
        return
      }
      if (this.phone.length !== 11) {
        uni.showToast({ title: '手机号长度必须为11位', icon: 'none' })
        return
      }
      if (!this.password) {
        uni.showToast({ title: '请输入密码', icon: 'none' })
        return
      }
      if (this.password !== this.confirmPassword) {
        uni.showToast({ title: '两次输入的密码不一致', icon: 'none' })
        return
      }
      
      // 模拟注册请求
      uni.request({
        url: 'https://your-api-url.com/register', // 替换为实际的注册接口地址
        method: 'POST',
        data: {
          phone: this.phone,
          password: this.password
        },
        success: (res) => {
          if (res.statusCode === 200) {
            uni.showToast({ title: '注册成功' })
            uni.navigateBack() // 返回上一页
          } else {
            uni.showToast({ title: res.data.message || '注册失败', icon: 'none' })
          }
        },
        fail: (err) => {
          uni.showToast({ title: '网络请求失败', icon: 'none' })
        }
      })
    },
    goToLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.top-image {
  width: 490rpx; /* 继续增大容器宽度 */
  height: 390rpx; /* 继续增大容器高度 */
  margin-top: 40rpx; 
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-image image {
  width: 440rpx; /* 继续增大 logo 宽度 */
  height: 440rpx; /* 继续增大 logo 高度 */
}

.form-container {
  width: 80%;
  margin-top: 40rpx; /* 减少与 logo 的间距 */
}

.input-item {
  width: 100%;
  height: 80rpx;
  margin-bottom: 40rpx;
  border-bottom: 1rpx solid #ccc;
}

.input-item input {
  width: 100%;
  height: 100%;
  font-size: 28rpx;
}

.input-placeholder {
  color: #999;
}

.register-btn {
  width: 100%;
  height: 80rpx;
  margin-top: 60rpx;
  background-color: #ff9500;
  color: white;
  border-radius: 40rpx;
  font-size: 32rpx;
}

.login-text {
  width: 100%;
  text-align: center;
  margin-top: 20rpx;
  color: #007AFF;
  font-size: 28rpx;
  text-decoration: underline;
}
</style>